<template>
  <div id="project" class="project-container">
    <el-container>
      <div style="width: 100%; height: 10px" />
      <el-header class="project-header">
        <ProjectInfo />
      </el-header>
      <el-main class="project-main">
        <ProjectComponent :key="resizeKey"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ProjectInfo from '@/views/projectManage/projectList/project/ProjectInfo.vue'
import ProjectComponent from '@/views/projectManage/projectList/ProjectComponent.vue'

export default {
  name: 'Project',
  components: { ProjectComponent, ProjectInfo },
  data() {
    return {
      envSubs: {},
      buildSubs: {},
      resizeKey: 0
    }
  },
  async created() {
    // 初始化websocket
    const stompClient = await this.$store.dispatch('websocket/initWebSocket')
    const projectId = this.$route.meta.projectId
    // 订阅环境状态 Topic
    this.envSubs = stompClient.subscribe('/topic/project/' + projectId + '/proEnvCompCheck', (message) => {
      const data = JSON.parse(message.body)
      this.$store.commit('project/SET_PROJECT_STATUS', data)
    })

    // 订阅组件构建状态
    this.buildSubs = stompClient.subscribe('/topic/project/' + projectId + '/compStepProgress', (message) => {
      const data = JSON.parse(message.body)
      this.$store.commit('project/SET_BUILD_STEP_PROGRESS', data)
    })

    // 订阅组件获取tag列表推送信息
    this.buildSubs = stompClient.subscribe('/topic/project/' + projectId + '/compLookTags', (message) => {
      const data = JSON.parse(message.body)
      this.$store.commit('project/SET_COMP_TAG_LIST', data)
      this.$notify({
        title: 'Git克隆完成，请重新点击获取分支或Tag',
        dangerouslyUseHTMLString: true,
        message: '<p>项目名称：' + data.projectName + '</p><p>组件名称：' + data.componentName + '</p>',
        type: 'warning',
        duration: 0
      })
    })
  },
  beforeDestroy() {
    this.envSubs.unsubscribe()
    this.buildSubs.unsubscribe()
  }
}
</script>

<style lang="scss" scoped>
.project {
  &-container {
    min-height: 919px;
    height: auto !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* 包含边框在高度计算中 */
  }
}
.el-container {
  flex: 1;
  min-height: calc(100vh - 60px); /* 假设底部高度60px */
  display: flex;
  flex-direction: column;
}

.project-header {
  height: auto !important; /* 覆盖element默认高度 */
  min-height: 210px; /* 最小高度 */
  padding: 10px !important;
  overflow: hidden;
}

.project-main {
  flex: 1;
  min-height: 200px; /* 防止过度挤压 */
  padding: 10px !important; /* 清除默认内边距 */
  overflow: hidden;
}
</style>
